<script>
export default {
  data() {
    return {
      // 菜单栏标题
      storeName: '测试门店',
      storeId: '111',
      // 菜单
      nbOption: {
        items: [
          {title: '按钮1', onClick: 'onClickGoToDetail', icon: 'plusempty'},
          {title: '按钮2', onClick: 'onClickGoToDetail', icon: 'plusempty'},
          {title: '按钮3', onClick: 'onClickGoToDetail', icon: 'plusempty'},
        ]
      }
    }
  },
  methods: {
    onClickGoToDetail() {
      console.log('onClickGoToDetail')
    }
  }
}
</script>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "Navbar"
  }
}
</route>

<template>
  <view class="content">
    <view class="content-img">
      <eui-nav-bar ref="RdsNavBar" title="菜单标题" :storeName="storeName" :storeId="storeId" :option="nbOption"
        @menuFunc="onClickGoToDetail">
      </eui-nav-bar>

      <eui-nav-bar ref="RdsNavBar" title="菜单标题" :storeName="storeName" :storeId="storeId" @menuFunc="onClickGoToDetail"
        :showPopup="false">
        <template v-slot:popupContent>
          <eui-button title="按钮"></eui-button>
        </template>
      </eui-nav-bar>

      <eui-nav-bar ref="RdsNavBar" title="菜单标题" :storeName="storeName" :storeId="storeId" @menuFunc="onClickGoToDetail"
        :showPopup="false">
        <template v-slot:storeExtend>
          <view style="flex: 1;text-align: center">[110028]啦啦啦 ></view>
        </template>
      </eui-nav-bar>
    </view>
  </view>
</template>

<style lang="scss">
.content {
  display: flex;
  width: 100%;
  padding: 0;
  background-color: #f4f4f4;
}

.content-img {
  width: 100%;
  background: linear-gradient(-50deg,rgba(71,148,250,1),rgba(13,222,229,1));
  background-repeat: no-repeat;
  background-size: 100% 150px;;
}
</style>
